<template>
  <f7-page>
    <f7-navbar :title="$f7route.context.type === 2?$t('m.bos1'):$t('m.bos2')" back-link=" "></f7-navbar>

    <f7-list class="buy-or-sell-list">
      <f7-list-input placeholder="0.000" :value="formItems.price" @input="formItems.price = $event.target.value">
        <h4 slot="label">{{$t('m.bos3')}} <span>{{$t('m.bos4')}}￥{{c2cInfo.price_up}} {{$t('m.bos5')}}￥{{c2cInfo.price_down}}</span></h4>
      </f7-list-input>
      <f7-list-item :title="$t('m.bos6')">
        <div slot="after" class="pay-types">
          <div>
            <f7-checkbox name="checkbox-1" value="1" @change="selectPayType"></f7-checkbox>
            <span>{{$t('m.bank')}}</span>
          </div>
          <div>
            <f7-checkbox name="checkbox-1" value="2" @change="selectPayType"></f7-checkbox>
            <span>{{$t('m.alipay')}}</span>
          </div>
          <div>
            <f7-checkbox name="checkbox-1" value="3" @change="selectPayType"></f7-checkbox>
            <span>{{$t('m.wechat')}}</span>
          </div>
        </div>
      </f7-list-item>
      <f7-list-input placeholder="0.000" :value="formItems.vol" @input="formItems.vol = $event.target.value">
        <h4 slot="label" class="justify-content-space-between">{{$t('m.bos7')}} <span>{{$t('m.bos8')}}：{{usdtInfo.num}} USDT</span></h4>
      </f7-list-input>
      <f7-list-item :title="$t('m.bos9')" :after="`${getFee}USDT`"></f7-list-item>
      <f7-list-input placeholder="0.000" readonly :value="getJiaoyi">
        <h4 slot="label" class="justify-content-space-between">{{$t('m.bos10')}} <span>CNY</span></h4>
      </f7-list-input>
      <f7-list-input placeholder="0.000" :value="formItems.vol_min" @input="formItems.vol_min = $event.target.value">
        <h4 slot="label" class="justify-content-space-between">{{$t('m.bos11')}} <span>CNY</span></h4>
      </f7-list-input>
      <f7-list-input placeholder="0.000" :value="formItems.vol_max" @input="formItems.vol_max = $event.target.value">
        <h4 slot="label" class="justify-content-space-between">{{$t('m.bos12')}} <span>CNY</span></h4>
      </f7-list-input>
      <f7-list-input type="textarea" :placeholder="$t('m.bos13')" :value="formItems.content" @input="formItems.content = $event.target.value">
        <h4 slot="label" class="justify-content-space-between">{{$t('m.bos14')}}</h4>
      </f7-list-input>
    </f7-list>

    <div class="content-padding margin-t80">
      <f7-button fill color="blue" large @click="pwdModal = true">{{$t('m.bos15')}}</f7-button>
    </div>

    <van-dialog
      v-model="pwdModal"
      :title="$t('m.transactionPwdPlaceholder')"
      show-cancel-button
      slot="fixed"
      @confirm="handleSubmitNow"
    >
      <div class="content-padding margin-t30">
        <custom-input type="password" :placeholder="$t('m.transactionPwdPlaceholder')" v-model="formItems.pwd"></custom-input>
      </div>
    </van-dialog>
  </f7-page>
</template>

<script>
  import { c2cIndex, runCTCSell } from "../api/find";

  export default {
    name: "buy-or-sell",
    data() {
      return {
        formItems: {
          pwd: '',
          vol: '',        //      数量
          pay_type: [], //   支付方式   ,拼接
          ctc_id: this.$f7route.context.type, //         1出售   2 购买
          price: '', //           价格
          vol_min: '',//      最小交易额度
          vol_max: '', //      最大交易额度
          content: '', //       备注
        },
        c2cInfo: {},
        pwdModal: false
      }
    },
    computed: {
      usdtInfo() {
        return this.$store.getters.currencyInfo[0];
      },
      getFee() {
        return (this.formItems.vol * this.c2cInfo.sell_fee).toFixed(2);
      },
      getJiaoyi() {
        return (this.formItems.price * this.formItems.vol).toFixed(2);
      }
    },
    mounted() {
      this.init(this.$f7route.context.type);
    },
    methods: {
      init(ctc_id) {
        c2cIndex({ctc_id}).then(res => {
          this.c2cInfo = res.data;
        })
      },
      selectPayType(e) {
        console.log(e.target.value);
        const findIndex = this.formItems.pay_type.indexOf(e.target.value);
        if(findIndex < 0) {
          this.formItems.pay_type.push(e.target.value);
        } else {
          this.formItems.pay_type.splice(findIndex, 1);
        }
      },
      handleSubmitNow() {
        let obj = {...this.formItems}
        obj.pay_type = obj.pay_type.join(',');
        runCTCSell(obj).then(() => {
          this.formItems.pwd = '';
          this.$f7router.back();
        })
      }
    }
  }
</script>

<style scoped lang="scss">
  .buy-or-sell-list {
    h4 {
      font-size: 28px;
      span {
        font-size: 20px;
        color: $colorGrey;
      }
      &.justify-content-space-between {
        display: flex;
        span {
          font-size: 20px;
          color: $mainColor2;
        }
      }
    }
  }
  .pay-types {
    display: flex;
    > div {
      margin-left: 10px;
      display: flex;
      align-items: center;
    }
    span {
      margin-left: 5px;
    }
  }
</style>
